<template>
  <div style="width: 80%">
    <div style="margin-bottom: 30px">新增借书记录</div>
    <el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="图书标准码" prop="bookNo">
        <el-select v-model="form.bookNo" filterable clearable placeholder="请选择" @change="selBook">
          <el-option
              v-for="item in books"
              :key="item.id"
              :label="item.bookNo"
              :value="item.bookNo">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="书名" prop="name">
        <el-input v-model="form.bookName" disabled></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="name">
        <el-input v-model="form.nums" disabled></el-input>
      </el-form-item>
      <el-form-item label="所需积分"  prop="publisher">
        <el-input v-model="form.score" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户ID" prop="userId">
        <el-select v-model="form.userId" filterable placeholder="请选择" @change="selUser">
          <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.id + ' ( '+item.name+ ' ) '"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名称" prop="cover">
        <el-input disabled v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="用户积分"  prop="publisher">
        <el-input v-model="form.account" disabled></el-input>
      </el-form-item>
      <el-form-item label="借书天数"  prop="days">
        <el-input-number v-model="form.days" :min="1" max="30" label="借书天数"></el-input-number>
      </el-form-item>
      <el-form-item label="联系方式" prop="cover">
        <el-input disabled v-model="form.userPhone"></el-input>
      </el-form-item>


    </el-form>

    <div style="text-align: center;margin-top: 30px">
      <el-button type="primary" @click="save" size="medium">提交</el-button>
    </div>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AddCategory",
  data(){
    return{
      form:{days:5},
      books:[],
      users:[],
      rules:{
        bookNo:[{required:true,message:"请输入图书标准码",trigger:"blur"}],
        userId:[{required:true,message:"请输入用户ID",trigger:"blur"}]
      }
    }
  },
  created() {
    request.get("/book/list").then(res =>{
      this.books = res.data
    })
    request.get("/user/list").then(res =>{
      this.users = res.data.filter(v => v.status)
    })
  },
  methods:{
    save(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          request.post("/borrow/save", this.form).then(res => {
            if (res.code === '200') {
              this.$message.success('借书成功！')
              this.$refs['ruleForm'].resetFields()
              this.form = {}
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    selBook(){
      const book = this.books.find(v => v.bookNo === this.form.bookNo)
      request.get("/book/"+book.id).then(res =>{
        this.$set(this.form,'bookName',res.data.name)
        this.form.score = res.data.score
        this.form.nums = res.data.nums
      })
    },
    selUser(){
      const user = this.users.find(v => v.id === this.form.userId)
      request.get("/user/"+user.id).then(res =>{
        this.$set(this.form,'userName',res.data.name)
        this.form.userPhone = res.data.phone
        this.form.account = res.data.account
      })
    }
  }
}
</script>

<style scoped>

</style>
